<template>
  <scroller class="page">
    <list class="addr-list">
      <cell class="addr-item" v-for="item in list">
        <div class="addr-info" @click="select(item)">
          <text class="address">{{ item.address }} {{ item.postcode }}</text>
          <text class="name">{{ item.name }} {{ item.mobile }}</text>
        </div>
        <div class="addr-edit" @click="editAddress(item)">
          <text class="addr-edit-text">编辑</text>
        </div>
      </cell>
    </list>
    <Footer />
    <div class="bottom" @click="editAddress">
      <text class="bottom-text">添加新地址</text>
    </div>
  </scroller>
</template>
<script>
import Footer from '@/components/Footer';
import utils from './utils/utils.js';
const modal = weex.requireModule('modal');
const bc = new BroadcastChannel('address');
const bcInfo = new BroadcastChannel('addressInfo');
export default {
  name: 'App',
  components: {
    Footer
  },
  data() {
    return {
      list: [],
      isEditOnly: false
    }
  },
  mounted() {
    var event = weex.requireModule('event');
    event.initData(JSON.stringify({'title':'收货地址'}), json => {
      console.log("address initData json: " + json);
      if (json) {
        var data = JSON.parse(json);
        this.isEditOnly = data.isEditOnly ? data.isEditOnly : false;
      }
      this.init();
    })
    event.initLife("index", function(json) {
      if (json == 'viewDidAppear') {
        utils.checkToken();
      }
    })

    // 接收下一级页面消息
    bcInfo.onmessage = event => {
      console.log(event.data);
      this.init();
    }
  },
  methods: {
    init() {
      var url = '/yq/user/address';
      var params = {};
      var success = res => {
        console.log(res);
        this.list = res.info;
      }
      var fail = res => {
        modal.toast({
          message: '获取数据失败',
          duration: 1
        })
      }
      utils.request(url, params, success, fail);
    },
    select(item) {
      if (this.isEditOnly) {
        return;
      }
      // 返回数据并刷新页面
      var data = {
        name: item.name ? item.name : '',
        address: item.address ? item.address : '',
        mobile: item.mobile ? item.mobile : '',
        postcode: item.postcode ? item.postcode : ''
      }
      bc.postMessage(data);

      var event = weex.requireModule('event');
      var params = {
        data: JSON.stringify({
          addressId: item.id
        })
      }
      event.onPop(JSON.stringify(params));
    },
    editAddress(item) {
      var event = weex.requireModule('event');
      var params = {
        path: 'addressInfo',
        data: JSON.stringify({
          addressId: item ? item.id : ''
        })
      }
      event.onPush(JSON.stringify(params));
    }
  }
}
</script>
<style scoped>
text {
  font-size: 32px;
}

.page {
  padding-bottom: 150px;
}

.addr-list {}

.addr-item {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #888;
  padding: 30px 50px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.address {
  margin-bottom: 10px;
  font-size: 28px;
}

.name {
  font-size: 28px;
}

.addr-edit {
  padding-left: 50px;
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: #888;
  height: 60px;
  flex-direction: row;
  align-items: center;
}

.addr-edit-text {}

.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #527a5f;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 110px;
}

.bottom-text {
  color: #fff;
}
</style>